<template>
<el-form ref="big_form" :label-position=" 'right' " label-width="90px"
				 :inline="true">
	<!-- 日期范围 -->
	<el-form-item label="日期范围">
		<el-date-picker
			v-model="chart2_use_data.datetime"
			type="daterange"
			range-separator="-"
			start-placeholder="Start date"
			end-placeholder="End date"
			value-format="YYYY-MM-DD"
		/>
	</el-form-item>

	<el-form-item>
		<el-button type="primary" @click="chart2()">提交</el-button>
	</el-form-item>

</el-form>
<v-chart class="chart" :option="chart2_option" :autoresize="true"/>
</template>

<script setup lang="ts">
import { EChartsOption } from 'echarts'
import VChart from "vue-echarts";
import {computed, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {reqInOutHistogram} from "@/api/first/DataAnalysis";
import {InOutHistogramResponseData} from "@/api/first/DataAnalysis/type.ts";
const chart2_use_data = reactive({
	datetime: null,
})
const chart2_date = ref<string[]>([])
const chart2_in = ref<number[]>([])
const chart2_out = ref<number[]>([])
const chart2 = () => {
	if (chart2_use_data.datetime === null) {
		ElMessage.warning('请选择时间')
		return
	}
	let date_start: string = chart2_use_data.datetime[0]
	let date_stop: string = chart2_use_data.datetime[1]
	reqInOutHistogram({
		start_date: date_start,
		end_date: date_stop,
	}).then((result: InOutHistogramResponseData) => {
		chart2_date.value = result.data.date
		chart2_in.value = result.data.in
		chart2_out.value = result.data.out
		ElMessage.success(result.success?.message)
	})
}


const chart2_option = computed<EChartsOption>(() => {
	return {
		dataZoom: [
			{
				type: 'inside'
			},
			{
				type: 'slider'
			}
		],
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			data: ['出库', '入库']
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		yAxis: [
			{
				type: 'value'
			}
		],
		xAxis: [
			{
				type: 'category',
				axisTick: {
					show: false
				},
				data: chart2_date.value
			}
		],
		series: [
			{
				name: '出库',
				type: 'bar',
				stack: 'Total',
				label: {
					show: false
				},
				emphasis: {
					focus: 'series'
				},
				data: chart2_out.value
			},
			{
				name: '入库',
				type: 'bar',
				stack: 'Total',
				label: {
					show: false
				},
				emphasis: {
					focus: 'series'
				},
				data: chart2_in.value
			}
		]
	};
})
</script>

<style scoped>
.chart {
	height: 400px;
}
</style>